<template>
    <div class="footer">
        <div class="footer-content">
            <div class="left">
                <ul class="link-list">
                    <li>
                        友情链接
                    </li>
                    <li>
                        <a href="http://zwfw.hubei.gov.cn" target="_blank">湖北政务服务网</a>
                    </li>
                    <li>
                        <a href="https://www.whrcgz.gov.cn" target="_blank">武汉人才服务网</a>
                    </li>
                    <li>
                        <a href="https://fgj.wuhan.gov.cn" target="_blank">武汉市住房和城市更新局</a>
                    </li>
                </ul>
                <dl>
                    <dt>武汉安居供应链有限公司</dt>
                    <dd>Copyright &copy; 2024 WUHAN ANJULIAN. All rights reserved. 鄂ICP备2023030090号</dd>
                </dl>
            </div>
            <div class="right">
                <div class="right-content">
                    <h3>扫码下载安居链APP，在线选房租房</h3>
                    <ul class="qrcode-list">
                        <li>
                            <img width="80px" src="/assets/ios_rqcode.png" alt="">
                            <span>iOS</span>
                        </li>
                        <li>
                            <img width="80px" src="/assets/android_rqcode.png" alt="">
                            <span>安卓</span>
                        </li>
                        <li>
                            <img width="80px" src="/assets/wechat_rqcode.png" alt="">
                            <span>小程序</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background-image: url('/assets/footer_bg.png');
    background-color: #1d2129;
    background-size: 100% 100%;
    width: 100%;
    height: 182px;
    font-size: 14px;
    > .footer-content {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        height: 100%;
        margin: auto;
        > .left {
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: space-between;
            color: #86909C;
            padding: 30px 0;
            .link-list {
                display: flex;
                > li {
                    padding-left: 40px;
                    a {
                        color: #FFFFFF;
                    }
                    &:first-child {
                        padding-left: 0;
                    }
                }
            }
            > dl, dd {
                margin: 0;
            }
        }
        > .right {
            height: 100%;
            display: flex;
            align-items: center;
            > .right-content {
                > h3 {
                    color: #fff;
                    padding-bottom: 12px;
                    text-align: center;
                }
                > .qrcode-list {
                    display: flex;
                    > li {
                        margin-left: 40px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        > span {
                            color: #fff;
                            font-size: 12px;
                            padding-top: 8px;
                        }
                        &:first-child {
                            margin-left: 0;
                        }
                    }
                }
            }
        }
    }
}
</style>